<template>
  <el-drawer :visible.sync="visible" :title="title" :modal-append-to-body="true" :append-to-body="true"
    :destroy-on-close="false" :modal="true" direction="rtl" :wrapperClosable="false" custom-class="form-drawer"
    size="450px" @closed="closed">
    <div class="form-drawer__content">
      <el-form ref="menuForms" :model="menuForm" :rules="rules" style="padding: 20px;">
        <el-form-item label-width="100px" label="名称" prop="name">
          <el-input v-model="menuForm.name" placeholder="请输入名称" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="标识" prop="code">
          <el-input v-model="menuForm.code" placeholder="请输入标识" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="类型" prop="perms">
          <el-select v-model="menuForm.type" placeholder="请选择" style="width: 100%;">
            <el-option label="目录" value="FOLDER"></el-option>
            <el-option label="菜单" value="MENU"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="图标" prop="icon">
          <el-col :span="24">
            <el-input v-model="menuForm.icon" placeholder="请选择图标" autocomplete="off" />
          </el-col>
        </el-form-item>

        <el-form-item label-width="100px" label="是否显示" prop="isDisplay">
          <el-switch v-model="menuForm.isDisplay" :active-value='1' :inactive-value='0' />
        </el-form-item>

        <el-form-item label-width="100px" label="是否控制" prop="isCtrl">
          <el-switch v-model="menuForm.isCtrl" :active-value='1' :inactive-value='0' />
        </el-form-item>
        <el-form-item label-width="100px" label="序号" prop="sort">
          <el-input-number v-model="menuForm.sort" :min="0" :max="1000" label="请输入序号" />
        </el-form-item>
      </el-form>
      <div class="form-drawer__footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
      </div>
    </div>

  </el-drawer>
</template>

<script>
  import {
    saveMenu
  } from '@/api/subsystem/scenemenu'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name: 'InfoDialog',
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {},
    watch: {
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.menuForm.id = value.data.id || ''
            this.menuForm.projectId = value.data.projectId || this.$store.getters.projectId
            this.menuForm.parentId = value.data.parentId || '0'
            this.menuForm.name = value.data.name || ''
            this.menuForm.code = value.data.code || ''
            this.menuForm.type = value.data.type || 'FOLDER'
            this.menuForm.icon = value.data.icon || ''
            this.menuForm.isDisplay = value.data.isDisplay || 0
            this.menuForm.isCtrl = value.data.isCtrl || 0
            this.menuForm.sort = value.data.sort || 0
          } else {
            this.menuForm.id = ''
            this.menuForm.projectId = this.$store.getters.projectId
            this.menuForm.parentId = '0'
            this.menuForm.name = ''
            this.menuForm.code = ''
            this.menuForm.type = 'FOLDER'
            this.menuForm.icon = ''
            this.menuForm.isDisplay = 0
            this.menuForm.isCtrl = 0
            this.menuForm.sort = 0
          }
          if (value.type) {
            this.type = value.type
            if (value.type === '0') {
              this.title = '新建'
            }
            if (value.type === '1') {
              this.title = '编辑'
            }
            if (value.type === '2') {
              this.title = '新建菜单'
              this.grandParentId = value.grandParentId
              this.menuForm.parentId = value.parentId || '0'
            }
          }
        },
        immediate: true,
        deep: false
      }
    },
    data() {
      return {
        visible: false,
        title: '',
        buttonLoading: false,
        grandParentId: '',
        menuForm: {
          id: '',
          projectId: '',
          parentId: '0',
          name: '',
          code: '',
          type: '',
          icon: '',
          isDisplay: 0,
          isCtrl: 0,
          sort: 0
        },
        rules: {
          name: [{
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 50,
              message: '长度在 2 到 50 个字符',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      submitForm: function() {
        this.$refs.menuForms.validate((valid) => {
          if (valid) {
            this.buttonLoading = true
            saveMenu(this.menuForm).then(rsp => {
              // console.log(rsp);
              if (isOk(rsp)) {
                if (this.type === 'M' || this.type === 'C') {
                  this.$message({
                    type: 'success',
                    message: '添加成功!'
                  })
                }
                if (this.type === '1') {
                  this.$message({
                    type: 'success',
                    message: '修改成功!'
                  })
                }
                this.buttonLoading = false
                this.closed()
                if (this.menuForm.parentId === '0') {
                  this.$emit('refreshAll')
                } else {
                  this.$emit('refresh', this.menuForm.parentId, this.grandParentId)
                }
              }
            })
          }
        })
      },
      closed: function() {
        this.$emit('closed', false)
      }
    }
  }
</script>

<style lang="scss">
  .info-dialog {}
</style>
